<!doctype html>
<html class="default no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{#ifCond model.name '==' project.name}}{{project.name}}{{else}}{{model.name}} | {{project.name}}{{/ifCond}}</title>
    <meta name="description" content="LitElement API documentation">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/images/favicon.png">
    <link rel="stylesheet" href="{{relativeURL "assets/css/main.css"}}">
    <link rel="stylesheet" href="{{relativeURL "../css/main.css"}}">
    <link rel="stylesheet" href="{{relativeURL "../css/pygments.css"}}">
    <link rel="stylesheet" href="{{relativeURL "../css/theme.css"}}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

    {{!-- Add margin-top to offset our custom fixed top nav. --}}
    <style>
    body {
        position: relative;
        margin-top: 60px;
    }
    @media screen and (max-width: 640px) {
        body {
            margin-top: 56px;
        }
    }
    </style>
</head>
<body>

<nav class="main-nav" markdown="0">
  <a class="nav-title" href="{{relativeURL "../"}}">LitElement</a>
  <div class="flex"></div>
  <a class="nav-item" href="{{relativeURL "../try"}}">Try</a>
  <a class="nav-item" href="{{relativeURL "../guide"}}">Guide</a>
  <a class="nav-item active" href="{{relativeURL "../api/index.html"}}">API</a>
  <a class="icon" href="https://github.com/polymer/lit-element" title="GitHub">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentcolor">
      <path d="M12,2C6.48,2,2,6.59,2,12.25c0,4.53,2.87,8.37,6.84,9.73c0.5,0.09,0.68-0.22,0.68-0.49c0-0.24-0.01-0.89-0.01-1.74c-2.78,0.62-3.37-1.37-3.37-1.37c-0.45-1.18-1.11-1.5-1.11-1.5c-0.91-0.64,0.07-0.62,0.07-0.62c1,0.07,1.53,1.06,1.53,1.06c0.89,1.57,2.34,1.11,2.91,0.85c0.09-0.66,0.35-1.11,0.63-1.37c-2.22-0.26-4.56-1.14-4.56-5.07c0-1.12,0.39-2.03,1.03-2.75c-0.1-0.26-0.45-1.3,0.1-2.71c0,0,0.84-0.28,2.75,1.05c0.8-0.23,1.65-0.34,2.5-0.34c0.85,0,1.7,0.12,2.5,0.34c1.91-1.33,2.75-1.05,2.75-1.05c0.55,1.41,0.2,2.45,0.1,2.71c0.64,0.72,1.03,1.63,1.03,2.75c0,3.94-2.34,4.81-4.57,5.06c0.36,0.32,0.68,0.94,0.68,1.9c0,1.37-0.01,2.48-0.01,2.81c0,0.27,0.18,0.59,0.69,0.49c3.97-1.36,6.83-5.2,6.83-9.73C22,6.59,17.52,2,12,2"/>
    </svg>
  </a>
  <a class="icon" href="javascript:searchBox.focus()" title="Search">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentcolor">
      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
    </svg>
  </a>
  <input id="searchBox" type="search" class="search-box" placeholder="Search" aria-label="Search">
</nav>

{{> header}}

<div class="container container-main">
    <div class="row">
        <div class="col-8 col-content">
            {{{contents}}}
        </div>
        <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
            <nav class="tsd-navigation primary">
                <ul>
                    {{#each navigation.children}}
                        {{> navigation}}
                    {{/each}}
                </ul>
            </nav>

            <nav class="tsd-navigation secondary menu-sticky">
                <ul class="before-current">
                    {{#each toc.children}}
                        {{> toc.root}}
                    {{/each}}
                </ul>
            </nav>
        </div>
    </div>
</div>

{{> footer}}

<div class="overlay"></div>
<script src="{{relativeURL "assets/js/main.js"}}"></script>
<script>if (location.protocol == 'file:') document.write('<script src="{{relativeURL "assets/js/search.js"}}"><' + '/script>');</script>
<script>
  searchBox.addEventListener('keypress', function(event) {
    if (event.keyCode === 13 /* enter */) {
      const site = window.location.hostname;
      const query = encodeURIComponent(searchBox.value);
      ga('send', 'pageview', '/search?q='+query);
      window.location = 'https://www.google.com/search?q=site%3A'+site+'+'+query;
      event.preventDefault();
    }
  });
  // TypeDoc's main.js installs a `keydown` handler on `body` for its own
  // search functionality - stop our search box from triggering that.
  searchBox.addEventListener('keydown', function(event) {
	event.stopPropagation();
  });
</script>

{{> analytics}}

</body>
</html>


